<script lang="ts" setup>
defineOptions({ inheritAttrs: false });
const props = withDefaults(defineProps<{
  name?: string;
  maxCommission: number;
  coefficient: number;
  minCommission?: number;
}>(), {
  minCommission: 0,
});

const shareValue = defineModel<number>('value', {
  required: true,
  set(v) {
    return Number(v);
  },
});

const ratioVal = computed(() => `${bignumber(shareValue.value).multipliedBy(props.coefficient).multipliedBy(100)}%`);
</script>

<template>
  <TAntdTheme component="Popover" :token="{ colorBgElevated: '#1f2026' }">
    <APopover trigger="click" placement="bottomLeft" :getPopupContainer="(el: any) => el?.children[0]">
      <template #default>
        <div
          class="relative flex cursor-pointer items-center justify-between rounded-2 bg-sys-layer-d p3 text-sm text-sys-text-body"
          v-bind="$attrs"
        >
          <span class="truncate">{{ props.name }}</span>
          <div>
            <span class="text-sys-text-ter">{{ ratioVal }}</span>
            <i class="i-ion:ios-arrow-down ml-1" />
          </div>
        </div>
      </template>

      <template #content>
        <div class="min-w-70 text-3.5">
          <div class="h-5 text-center text-sys-text-body">
            {{ props.name }}
          </div>
          <!-- 比例结果 -->
          <div class="flex py-2 text-center">
            <div class="flex-1">
              <div class="text-6 leading-normal">
                {{ bignumber(props.maxCommission!).multipliedBy(props.coefficient).minus(bignumber(shareValue).multipliedBy(props.coefficient)).multipliedBy(100) }}%
              </div>
              <div class="text-xs text-sys-text-body">
                <span>{{ $t('2R1WqKav0vUQvUe6l0Vn') }}</span>
                <THelptip class="ml-1" overlayClassName="text-xs">
                  {{ $t('uTxte_9nQcSnKoLp2Tjb4') }}
                </THelptip>
              </div>
            </div>
            <div class="flex-1">
              <div class="text-6 leading-normal">
                {{ bignumber(shareValue).multipliedBy(props.coefficient).multipliedBy(100) }}%
              </div>
              <div class="text-xs text-sys-text-body">
                <span>{{ $t('fMq6Dvhkec9M0IzRmbDrr') }}</span>
                <THelptip class="ml-1" overlayClassName="text-xs">
                  {{ $t('1cmPCGb8P9kud7DNeL9H') }}
                </THelptip>
              </div>
            </div>
          </div>

          <!-- 原生 Input 方案 -->
          <input
            v-if="props.maxCommission > props.minCommission"
            v-model="shareValue" class="slider w-full !mt-5" type="range" :step="0.01"
            :min="props.minCommission" :max="props.maxCommission"
          >
          <!-- #E -->
        </div>
      </template>
    </APopover>
  </TAntdTheme>
</template>

<style lang="scss" scoped>
input.slider {
  box-sizing: border-box;
  padding: 16px 12px;
  margin: 0;
  appearance: none;
  background-color: theme('colors.sys.layer.d');
  border-radius: 8px;

  &::-webkit-slider-runnable-track {
    height: 8px;
    background-color: theme('colors.green.500');
    border-radius: 8px;
  }

  &::-webkit-slider-thumb {
    box-sizing: content-box;
    width: 20px;
    height: 24px;
    margin-top: -8px;
    appearance: none;
    background-color: #fff;
    border-radius: 4px;
  }
}
</style>
